.keyboard-container {
    position: absolute;
    bottom: 0;
}

.key-white {
    position: absolute;
    color: #333;
    height: 100%;
    background: linear-gradient(-30deg, #f5f5f5, #fff);
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff, inset 1px 0 0 #fff, inset -1px 0 0 #fff, 0 4px 3px rgb(0 0 0 / 70%);
    border-radius: 0 0 5px 5px;
    z-index: 100;
    display: flex;
    /* 让子元素在交叉轴（垂直方向）上靠下对齐 */
    align-items: flex-end;
    justify-content: center;
}

.key-white:active {
    background: linear-gradient(-30deg, #f5f5ff, #999);
}

.key-black {
    position: absolute;
    top: 0;
    height: 65%;
    background: linear-gradient(-30deg, #555, #111);
    box-shadow: 2px 3px 5px #888888;
    z-index: 101;
}

.key-black:active {
    background: linear-gradient(-30deg, #999, #333);
}